<template>
    <div class="header" :style="{
      backgroundImage: `url(${sellerIofo.avatar})`,
    }">
      <!-- 毛玻璃遮罩层 -->
      <div class="mask"></div>
      <!-- 商家头部信息 -->
      <div class="info">
        <div class="pic">
          <img :src="sellerIofo.avatar" alt="商家logo" />
        </div>
        <div class="title">
          <h2>{{ sellerIofo.name }}</h2>
          <span class="sp1">{{ sellerIofo.description }}/{{ sellerIofo.deliveryTime }}分钟送达</span>
          <!-- <p class="p1">{{ sellerIofo.supports[0].description}}在线支付满28减5,满50减10</p> -->
          <p class="p1">在线支付满28减5 , 满50减10</p>
        
        </div>
      </div>
      <div class="tips">
        <p>
          {{ sellerIofo.bulletin }}
        </p>
      </div>
    </div>
  </template>
  
  <script>
  import { mapActions, mapState } from "vuex";
  export default {
    data() {
      return {};
    },
    created() {
      //获取头部数据
      this.getSeller();
    },
    computed: {
      ...mapState(["sellerIofo"]),
  
    },
    methods: {
      ...mapActions(["getSeller"]),
    },
  };
  </script>
  
  <style lang="less" scoped>
  .header {
    height: 134px;
    background: #333;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  
    .mask {
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      height: 100%;
      background-color: rgba(7, 17, 27, 0.5);
      backdrop-filter: blur(10px);
    }
  
    .info {
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      height: 100%;
      display: flex;
  
      .pic {
        padding: 24px 0 0 24px;
  
        img {
          width: 64px;
        }
      }
  
      .title {
        font-size: 14px;
        padding-top: 20px;
        color: #fff;
        font-weight: bolder;
  
        h2::before {
          content: "品牌";
          font-size: 16px;
          text-align: center;
          padding: 3px 5px;
          background-color: red;
          margin: 0px 6px 0px 16px;
        }
        .sp1 {
            display: inline-block;
            font-size: 14px;
            line-height: 12px;
            margin: 10px 0px 0px 16px;
            color: rgb(229, 224, 224);
          }
          .p1{
            font-size: 14px;
            line-height: 12px;
            margin: 10px 0px 0px 16px;
            color: rgb(229, 224, 224);
          }
          .p1::before{
            content: "减";
          font-size: 16px;
          text-align: center;
          padding: 0px 4px;
          color: rgb(230, 137, 137);
          background-color: #fff;
          border-radius: 10%;
          margin-right: 4px;
          }
      }
    }
  
    .tips {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      font-size: 10px;
      color: #fff;
      padding-left: 12px;
      background: rgba(7, 17, 27, 0.2);
  
      p {
        height: 28px;
        line-height: 28px;
        width: 85%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
  
        &::before {
          content: "公告";
          width: 4px;
          height: 2px;
          background-color: white;
          color: black;
          margin-right: 4px;
        }
      }
    }
  }
  </style>
  